<template>
  <!-- 整体的容器 -->
  <div class="box">
    <!-- 左侧标签点击的选项卡显示右侧内容 -->
    <div class="left_content" :style="{ backgroundColor: tabbackgroundcolor }">
      <div
        v-for="(item, index) in data"
        :key="item.id"
        @click="item_label(item, index)"
        class="left_item_box"
        :style="{
          backgroundColor: label_index === index ? backgroundcolor : '',
          color: label_index === index ? color : '',
          borderLeft: label_index === index ? '4px solid ' + borderleft : '',
        }"
      >
        <div class="left_item">{{ item.name }}</div>
      </div>
    </div>
    <!-- 右侧内容 -->
    <div class="right_content" v-if="data[label_index]">
      <!-- 右侧插槽 -->
      <slot name="rightHeader"></slot>
      <div style="line-height: 50px;text-align: center;">{{ data[label_index].content.title }}</div>
      <div style="line-height: 50px;text-align: center;">{{ data[label_index].content.content }}</div>
      <div style="line-height: 50px;text-align: center;">{{ data[label_index].content.img }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 正确地使用 defineProps 来接收父组件传递的 props
const props = defineProps({
  data: {
    type: Array, //指定 data 的类型为对象
    required: true, //指定 data 是必需的。否则报黄
  },
  // 修改标签背景颜色
  backgroundcolor: {
    type: String,
    default: "white", // 默认值为白色
  },
  // 修改标签文字颜色
  color: {
    type: String,
    default: "black",
  },
  // 修改左侧标签栏整体颜色
  tabbackgroundcolor: {
    type: String,
    default: "#F6F7F9",
  },
  // 修改左边框颜色
  borderleft: {
    type: String,
    default: "blue",
  },
});

// 当前选中的标签的索引
const label_index = ref(0);
const emit = defineEmits(["item_clicked"]);
// 点击标签时更新选中的标签索引
const item_label = (item, index) => {
  label_index.value = index; // 设置当前选中的标签索引
  // 通过 $emit 将点击的数据传递给父组件
  emit("item_clicked", item);
};
</script>
<style>
/* 整体的容器 */
.box {
  width: 100%;
  height: 100vh;
  display: flex;
}
/* 左侧标签 */
.left_content {
  width: 25%;
  height: 100%;
  background-color: #f6f7f9;
}
/* 右侧内容 */
.right_content {
  width: 75%;
  height: 100%;
}
/* 左侧标签块级显示内容 */
.left_item_box {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 右侧内容标题 */
.right_content_header {
  height: 35px;
  padding-top: 15px;
  padding-left: 5%;
  width: 95%;
  background-color: #d3e3fd;
}
/* 右侧内容区域 （中间）*/
.right_content_content {
  height: 80%;
  padding-top: 15px;
  padding-left: 5%;
  width: 95%;
  background-color: #4786eb;
}
/* 右侧底部内容 */
.right_content_Footer {
  height: calc(20% - 80px);
  padding-top: 15px;
  padding-left: 5%;
  width: 95%;
  background-color: #0b59d6;
}
/* 中间内容部分插槽 */
.right_content_content_slot {
  height: 50%;
  width: 100%;
  background-color: #ee1515;
}
</style>
